<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { downloadApp } from "@/utils/public";
let wxOpen = ref(false);
let isWx = () => {
    //是否是微信浏览器
    if (/(micromessenger)/i.test(navigator.userAgent)) {
        wxOpen.value = true
        //是否电脑微信或者微信开发者工具
        // if (/(WindowsWechat)/i.test(navigator.userAgent) || /(wechatdevtools)/i.test(navigator.userAgent)) {
        // } else {
        //     //手机微信打开的浏览器
        // }
    } else {
        // 其他浏览器
        wxOpen.value = false
    }
}
onMounted(async () => {
    isWx();
})
</script>
<template>
    <div class="downloadTwo">
        <div class="top_down">
            <div class="logo">
                <img src="@/assets/images/logo.png" class="img">
<<<<<<< Updated upstream
                <div class="text">本派对</div>
=======
                <div class="text">CC星球</div>
>>>>>>> Stashed changes
            </div>
            <div class="down" @click="downloadApp()">立即下载</div>
        </div>
        <img src="@/assets/images/butimg1.png" class="btn2" @click="downloadApp()">

        <div class="wx_box" v-if="wxOpen">
            <img src="@/assets/images/wx.png" class="img">
        </div>
    </div>
</template>
<style lang="scss" scoped>
.downloadTwo {
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background: #B5E8FD url(../assets/images/backimg1.png) left top / 100% 100% no-repeat;
    position: relative;
    padding-bottom: 96px;
    box-sizing: border-box;

    .btn2 {
        position: absolute;
        bottom: 125px;
        left: 50%;
        transform: translateX(-50%);
        width: 240px;
        height: 56px;
    }

    .top_down {
        width: 100%;
        padding: 8px 20px;
        box-sizing: border-box;
        background: rgb(255, 255, 255, 0.9);
        border-radius: 0px 0px 8px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .logo {
            display: flex;
            align-items: center;

            .img {
                width: 44px;
                height: 44px;
            }

            .text {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 400;
                color: #000000;
                line-height: 44px;
                margin-left: 8px;
            }
        }

        .down {
            width: 88px;
            height: 32px;
            background: #000000;
            border-radius: 30px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 32px;
            text-align: center;
        }

    }

    .wx_box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba($color: #000000, $alpha: 0.5);
        z-index: 2;

        .img {
            width: 100%;
            height: auto;
            display: block;
        }
    }

}
</style>